<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>note</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<meta http-equiv="Cache-Control" content="no-store"/>
	<meta http-equiv="Pragma" content="no-cache"/>
	<meta http-equiv="Expires" content="0"/>
	<link type="text/css" rel="stylesheet" href="../../css/pepper-grinder/jquery-ui-1.8.16.custom.css" />
	<link type="text/css" rel="stylesheet" href="fancybox/jquery.fancybox-1.2.6.css" />
	<link type="text/css" rel="stylesheet" href="css/note.css" />
	
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		
		$.get("note_getNoteByUserId.do",{},function(data){
			for(var i=0;i<data.length;i++){
				var num = Math.ceil(data[i].content.length/80);	
				var str = "<div id='note_" + data[i].id + "' class='note "+data[i].color+"' style='left:" + data[i].xPos + "px;top:" + data[i].yPos + "px;z-index:"+data[i].zIndex+"'><div id='close_" + data[i].id + "' class='note_close' style='position: absolute;width:14px;height:14px;left:-7px;top:-7px;z-index:3;cursor: pointer;background: url(images/delete.png) no-repeat ;'></div><span style='width:140px;word-wrap: break-word; word-break: normal; overflow:hidden;' class='data' id='" + data[i].id + "'>"+data[i].content+"</span></div>";
			    $("#note_div").append(str);
			    $("#close_"+data[i].id).bind("click",function(){
			    	var id1 = this.id.split("_")[1];
			    	$.get("note_deleteNote.do",{
			    		id:id1
			    	});
			    	$("#note_"+id1).remove();
				});
			    $("#note_"+data[i].id).css("height",150*num);
			    $("#note_"+data[i].id).bind("dblclick",function(event){
			    	var id = this.id.split("_")[1];
			    	var content = $(this).find("span.data").html();
			    	$("#fancy").trigger("click");
			    	setTimeout(function(){
			    		$("#myid").val(id);
			    		$("#note_txt").val(content);
			    	},500);
			    	
				});
			    make_draggable($(".note"));
			}
		});
		
		var tmp;
		$(".note").each(function(){
			tmp = $(this).css("z-index");
			if(tmp>zIndex) zIndex = tmp;
		});
		
		$("#fancy").fancybox({ 
			'zoomSpeedIn'		: 600,
			'zoomSpeedOut'		: 500,
			'easingIn'			: 'easeOutBack',
			'easingOut'			: 'easeInBack',
			'hideOnContentClick': false,
		    'type'              :'ajax', 
		    'modal'             :true, 
		    'titleShow'         :false
		}); 
		
		$("#color li").live('click',function(){ 
		    var color = $(this).attr("class"); 
		    $("#mycolor").val(color); 
		    $(this).css("border","1px solid #369"); 
		    $(this).siblings().css("border","1px solid #fff"); 
		}); 
		
		$("#addbtn").live("click",function(e){
			var txt = $("#note_txt").val();
			var color = $("#mycolor").val();
			var id = $("#myid").val();
			if(txt==""){
				 $("#msg").html("内容不能为空");
				 $("#note_txt").focus();
				 return false;
			}
			var data = {
				"id"     : id,
				"zIndex" : ++zIndex,
				"content": txt,
				"color"  : color
			};
			
			$.post('note_saveNote.do',data,function(data){
				zIndex = zIndex++;
				if(data!=null){
					var num = Math.ceil(data.content.length/80);	
					var str;
					if(id!=""){
						$("#note_"+data.id).find("span.data").html(data.content);
						$("#note_"+data.id).attr("class","note "+data.color);
					}else{
						str = "<div id='note_" + data.id + "' class='note "+data.color+"' style='left:0;top:0;z-index:"+data.zIndex+"'><div id='close_" + data.id + "' class='note_close' style='position: absolute;width:14px;height:14px;left:-7px;top:-7px;z-index:3;cursor: pointer;background: url(images/delete.png) no-repeat ;'></div><span style='width:140px;word-wrap: break-word; word-break: normal; overflow:hidden;' class='data' id='" + data.id + "'>"+data.content+"</span></div>";					
						$("#note_div").append(str);
						$(".note_close").bind("click",function(){
							var id2 = this.id.split("_")[1];
							$.get("note_deleteNote.do",{
					    		id:id2
					    	});
							$("#note_"+id2).remove();
						});
						$("#note_"+data.id).bind("dblclick",function(event){
					    	var id = this.id.split("_")[1];
					    	var content = $(this).find("span.data").html();
					    	$("#fancy").trigger("click");
					    	setTimeout(function(){
					    		$("#myid").val(id);
					    		$("#note_txt").val(content);
					    	},500);
					    	
						});
					}
					$("#note_"+data.id).css("height",150*num);
				    make_draggable($(".note"));
				    $("#fancy").fancybox.close();
				}		
			});
			e.preventDefault();
		});	
		
		$("div").disableSelection();

		$(window).resize(function() {
			refresh();
		});
		refresh();
	});
	var zIndex = 0;
	function make_draggable(elements){
		elements.draggable({
			containment:"parent",
			start:function(e,ui){
				ui.helper.css('z-index',++zIndex); 
			},
			stop:function(e,ui){
				$.get("note_updateNote.do",{
					xPos		: ui.position.left,
					yPos		: ui.position.top,
					zIndex		: zIndex,
					id	        : ui.helper.find("span.data").attr("id")
				});
			}
		});
	}
	
	function refresh(){
		var winheight = $(window).height();
		var winwidth = $(window).width();
		$("#bodydiv").css("height",winheight);
		$("#content").css("height",winheight-40);
		$("#note_div").css("height",winheight-40);
	}
	
	
	</script>
</head>
<body style="background-color=transparent;width:100%;margin-left:0px;margin-top:0px;">
	<div id="bodydiv" style="background:url(../../image/bg/9.png)">
		<div id="content" style="position:absolute;left:0px; right:0px; padding:10px; margin:10px;">
			<div id="note_div" style="text-align: center;top: 10px;">
				<a style="color: #fff;font-size: 16px;text-decoration: none;" href="addNote.html" id="fancy">添加便签</a>
			</div>
		</div> 
	</div>
</body>
</html>
